<template>
	<view class="content">
		<template v-if="info.ranking">
			<view class="title">{{$t('index.liansaijifenbang')}}</view>
			<view class="title">{{homeData.homeName}}</view>
			<view class="c-item-jifen c-item-home">
				<view class="c-item-j">{{$t('index.zhudui')}}</view>
				<view class="c-item-j">{{$t('index.sai')}}</view>
				<view class="c-item-j">{{$t('index.shengpingfu')}}</view>
				<view class="c-item-j">{{$t('index.jinshi')}}</view>
				<view class="c-item-j">{{$t('index.jifen')}}</view>
				<view class="c-item-j">{{$t('index.paiming')}}</view>
			</view>
			<view class="c-item-jifen"  v-for="(item,index) in info.ranking.home" :key="index">
				<view class="c-item-j">{{item.name}}</view>
				<view class="c-item-j">{{item.sai}}</view>
				<view class="c-item-j">{{item.sheng}}/{{item.ping}}/{{item.fu}}</view>
				<view class="c-item-j">{{item.de}}/{{item.shi}}</view>
				<view class="c-item-j">{{item.jf}}</view>
				<view class="c-item-j">{{item.pm}}</view>
			</view>
		</template>
		<template v-if="info.ranking">
			<view class="title">{{homeData.awayName}}</view>
			<view class="c-item-jifen c-item-home">
				<view class="c-item-j">{{$t('index.kedui')}}</view>
				<view class="c-item-j">{{$t('index.sai')}}</view>
				<view class="c-item-j">{{$t('index.shengpingfu')}}</view>
				<view class="c-item-j">{{$t('index.jinshi')}}</view>
				<view class="c-item-j">{{$t('index.jifen')}}</view>
				<view class="c-item-j">{{$t('index.paiming')}}</view>
			</view>
			<view class="c-item-jifen" v-for="(item,index) in info.ranking.away" :key="index">
				<view class="c-item-j">{{item.name}}</view>
				<view class="c-item-j">{{item.sai}}</view>
				<view class="c-item-j">{{item.sheng}}/{{item.ping}}/{{item.fu}}</view>
				<view class="c-item-j">{{item.de}}/{{item.shi}}</view>
				<view class="c-item-j">{{item.jf}}</view>
				<view class="c-item-j">{{item.pm}}</view>
			</view>
		</template>
		<template  v-if="info.v_history">
			<view class="title">{{$t('index.lishijiaofeng')}}</view>
			<view class="c-item" v-for="(item,index) in info.v_history.gamelist" :key="index">
				<view class="i-left">
					<view style="width: 120rpx;">
						<view class="name lz-ellipsis-1">{{item.union}}</view>
						<view>{{item.date}}</view>
					</view>
				</view>
				<view style="flex: 1;">
					<view class="name lz-ellipsis-1">{{item.h_name}}</view>
					<view class="name lz-ellipsis-1">{{item.a_name}}</view>
				</view>
				<view class="i-center">
					<view>FT</view>
					<view>{{item.score.split('-')[0]}}</view>
					<view>{{item.score.split('-')[1]}}</view>
				</view>
				<view class="i-center" style="color: #a8a8a8;">
					<view>HT</view>
					<view>{{item.half_score.split('-')[0]}}</view>
					<view>{{item.half_score.split('-')[1]}}</view>
				</view>
				<view class="i-right">
					<view style="display: flex;">
						<view class="sheng" v-if="item.shengfu==1">W</view>
						<view class="ping" v-if="item.shengfu==0">D</view>
						<view class="fu" v-if="item.shengfu==-1">I</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="info.h_history">
			<view class="title">{{homeData.homeName}}</view>
			<view class="c-item" v-for="(item,index) in info.h_history.gamelist" :key="index">
				<view class="i-left">
					<view style="width: 120rpx;">
						<view class="name lz-ellipsis-1">{{item.union}}</view>
						<view>{{item.date}}</view>
					</view>
				</view>
				<view style="flex: 1;">
					<view class="name lz-ellipsis-1">{{item.h_name}}</view>
					<view class="name lz-ellipsis-1">{{item.a_name}}</view>
				</view>
				<view class="i-center">
					<view>FT</view>
					<view>{{item.score.split('-')[0]}}</view>
					<view>{{item.score.split('-')[1]}}</view>
				</view>
				<view class="i-center" style="color: #a8a8a8;">
					<view>HT</view>
					<view>{{item.half_score.split('-')[0]}}</view>
					<view>{{item.half_score.split('-')[1]}}</view>
				</view>
				<view class="i-right">
					<view style="display: flex;">
						<view class="sheng" v-if="item.shengfu==1">W</view>
						<view class="ping" v-if="item.shengfu==0">D</view>
						<view class="fu" v-if="item.shengfu==-1">I</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="info.a_history">
			<view class="title">{{homeData.awayName}}</view>
			<view class="c-item" v-for="(item,index) in info.a_history.gamelist" :key="index">
				<view class="i-left">
					<view style="width: 120rpx;">
						<view class="name lz-ellipsis-1">{{item.union}}</view>
						<view>{{item.date}}</view>
					</view>
				</view>
				<view style="flex: 1;">
					<view class="name lz-ellipsis-1">{{item.h_name}}</view>
					<view class="name lz-ellipsis-1">{{item.a_name}}</view>
				</view>
				<view class="i-center">
					<view>FT</view>
					<view>{{item.score.split('-')[0]}}</view>
					<view>{{item.score.split('-')[1]}}</view>
				</view>
				<view class="i-center" style="color: #a8a8a8;">
					<view>HT</view>
					<view>{{item.half_score.split('-')[0]}}</view>
					<view>{{item.half_score.split('-')[1]}}</view>
				</view>
				<view class="i-right">
					<view style="display: flex;">
						<view class="sheng" v-if="item.shengfu==1">W</view>
						<view class="ping" v-if="item.shengfu==0">D</view>
						<view class="fu" v-if="item.shengfu==-1">I</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="info.game_future"> 
			<view class="title">{{homeData.homeName}}</view>
			<view class="c-item" v-for="(item,index) in info.game_future.home" :key="index">
				<view class="i-left">
					<view style="width: 120rpx;">
						<view class="name1 lz-ellipsis-1">{{item.union}}</view>
						<view>{{item.date}}</view>
					</view>
				</view>
				<view style="flex: 1;">
					<view class="name lz-ellipsis-2">{{item.h_name}}</view>
					<view class="name lz-ellipsis-2">{{item.a_name}}</view>
				</view>
				<view class="i-right">
					<view>{{item.day}}</view>
				</view>
			</view>
		</template>
		<template v-if="info.game_future">
			<view class="title">{{homeData.awayName}}</view>
			<view class="c-item" v-for="(item,index) in info.game_future.away" :key="index">
				<view class="i-left">
					<view style="width: 120rpx;">
						<view class="name1 lz-ellipsis-1">{{item.union}}</view>
						<view>{{item.date}}</view>
					</view>
				</view>
				<view style="flex: 1;">
					<view class="name lz-ellipsis-2">{{item.h_name}}</view>
					<view class="name lz-ellipsis-2">{{item.a_name}}</view>
				</view>
				<view class="i-right">
					<view>{{item.day}}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			matchId: {
				type: [String, Number],
				default: ''
			},
			typeName:{
				type: String,
				default: ''
			},
			homeData:{
				type: Object,
				default:()=>{
					return {}
				}
			}
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {},
		data() {
			return {
				info:'',
			}
		},
		mounted() {
			if(this.typeName=='zq'){
				this.matchDetail()
			}else{
				this.bkmatchDetail()
			}
			
		},
		methods: {
			bkmatchDetail() {
				uni.$u.http.get(this.api.api_v1_bkdata_matchAnalysis, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			},
			matchDetail() {
				uni.$u.http.get(this.api.api_v1_fbdata_matchAnalysis, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #00141E;font-size: 12px;
		.title{
			color: #ffaf01;padding:5px 10px;
		}
		.c-item-home{
			background-color: rgba(0, 54, 72, 0.5);
		}
		.c-item-jifen{
			display: flex;width: 100%;border-top: 1px solid #003648;box-sizing: border-box;color: #a8a8a8;
			.c-item-j{
				flex: 1;align-items: center;justify-content: center;display: flex;text-align: center;border-right: 1px solid #003648;padding:10px 0;
			}
		}
		.c-item{
			display: flex;width: 100%;border-top: 1px solid #003648;padding:10px;box-sizing: border-box;
			color: #a8a8a8;align-items: flex-end;justify-content: space-between;position: relative;height: 140rpx;
			.i-left{
				text-align: center;display: flex;justify-content: space-between;align-items: center;margin-right: 10px;
				.name{
					text-align: start;position: absolute;top: 5px;left: 24rpx;width: 500rpx;
				}
				.name1{
					text-align: start;position: absolute;top: 5px;left: 24rpx;width: 500rpx;
				}
			}
			.i-center{
				color: #FFBA5A;text-align: center;padding: 0 10rpx;display: flex;flex-direction: column;align-items: center;
			}
			.i-right{
				justify-content: space-between;display: flex;align-items: center;
				.name{
					max-width: 150rpx;text-align: center;
				}
				.sheng,.ping,.fu{
					width: 40rpx;height: 40rpx;border-radius: 50%;text-align: center;line-height: 40rpx;background-color: #66BB20;color: #fff;
					margin-left: 5px;
				}
				.ping{
					background-color: #FFBA5A;
				}
				.fu{
					background-color: #ffaf01;
				}
			}
		}
	}
</style>